/**
 * 拖拽指令，用于元素宽度的拖拽调整。
 *
 * @param {HTMLElement} el - 被绑定拖拽指令的元素。
 * @param {Object} binding - 绑定的指令信息，包含拖拽标识符。
 * @param {Object} vNode - Vue虚拟节点，用于获取上下文信息。
 */
export default {
  bind(el, binding, vNode) {
    // 绑定拖拽宽度调整功能
    // 参数解释：
    // el：绑定事件的DOM元素
    // binding.value.dragId：拖拽调整宽度的唯一标识
    // vNode：Vue虚拟节点
    bindDragWidth(el, binding.value.dragId, vNode);
  },
};

/**
 * 绑定拖拽宽度的功能。
 *
 * 此函数使元素能够通过拖拽来调整其宽度，并根据宽度的变化调整关联元素的高度，保持16:9的比例。
 * 同时，根据宽度的不同，切换元素的状态。
 *
 * @param {HTMLElement} el - 被拖拽的元素。
 * @param {string} id - 关联元素的ID，用于宽度和高度的同步调整。
 * @param {Object} vNode - Vue虚拟节点，用于访问上下文数据和方法。
 */
export function bindDragWidth(el, id, vNode) {
  const _this = vNode.context;

  // 绑定触摸开始事件
  el.addEventListener("touchstart", dragWidthStart);

  // 绑定鼠标按下事件
  el.onmousedown = (e) => {
    e.stopPropagation();

    // 计算当前元素距离可视区的距离
    const disX = e.clientX - el.offsetLeft;

    // 绑定鼠标移动事件
    document.body.onmousemove = function (event) {
      e.preventDefault(); // 移动时禁用默认事件
      // 通过事件委托，计算移动的距离
      const widthW = event.clientX - disX;
      const h = (widthW * 9) / 16;
      // 设置关联元素的宽度和高度
      document.getElementById(id).style.width = `${widthW}px`;
      document.getElementById(id).style.height = `${
        h > document.body.offsetHeight ? document.body.offsetHeight : h
      }px`;

      // 根据宽度切换元素状态
      if (widthW <= 386) {
        _this.activeBig = false;
        _this.activeSmall = true;
      } else if (widthW >= 936) {
        _this.activeBig = true;
        _this.activeSmall = false;
      } else {
        _this.activeBig = false;
        _this.activeSmall = false;
      }

      // 更新宽度和高度到上下文
      _this.mapWidth = widthW;
      _this.mapHeight = h;
    };

    // 绑定鼠标松开事件
    document.body.onmouseup = function () {
      document.body.onmousemove = null;
      document.body.onmouseup = null;
    };
  };

  // 触摸开始事件处理函数
  function dragWidthStart(e) {
    if (e.cancelable) {
      // 判断默认行为是否已经被禁用
      if (!e.defaultPrevented) {
        e.preventDefault();
      }
    }
    e.stopPropagation();

    // 鼠标按下，在原来页面上增加透明遮罩，防止部分元素例如iframe监听不到鼠标事件
    // 计算当前元素距离可视区的距离
    const disX = e.touches[0].clientX - el.offsetLeft;

    // 绑定触摸移动事件
    el.addEventListener("touchmove", dragWidthMove);

    // 绑定触摸结束事件
    el.addEventListener("touchend", dragWidthEnd);

    // 触摸移动事件处理函数
    function dragWidthMove(event) {
      e.preventDefault(); // 移动时禁用默认事件
      // 通过事件委托，计算移动的距离
      const w = event.touches[0].clientX - disX;
      const h = (w * 9) / 16;
      // 设置关联元素的宽度和高度
      window.document.getElementById(id).style.width = w + "px";
      window.document.getElementById(id).style.height =
        (h > document.body.offsetHeight ? document.body.offsetHeight : h) +
        "px";

      // 根据宽度切换元素状态
      if (w <= 386) {
        _this.activeBig = false;
        _this.activeSmall = true;
      } else if (w >= 936) {
        _this.activeBig = true;
        _this.activeSmall = false;
      } else {
        _this.activeBig = false;
        _this.activeSmall = false;
      }

      // 更新宽度和高度到上下文
      _this.mapWidth = w;
      _this.mapHeight = h;
    }

    // 触摸结束事件处理函数
    function dragWidthEnd() {
      // 解除触摸移动和结束事件的绑定
      el.removeEventListener("touchmove", dragWidthMove);
      el.removeEventListener("touchend", dragWidthEnd);
    }
  }
}
